<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高级个人简历</title>
    <link rel="stylesheet" href="global.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2401511_2bppbqytnyf.css">
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        dl {
            margin: 0;
            padding: 0;
        }

        dl dd {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 960px;
            /*background-color: rgba(0, 0, 0, 0.1);*/
            display: flex;
            justify-content: space-between;
            flex-shrink: 0;
            margin: auto;
            border-left: 1px solid black;
            border-right: 1px solid black;
        }

        .header {
            width: 100%;
            /*background-image: linear-gradient(135deg, #3C8CE7 10%, #00EAFF 100%);*/
            background-color: #3c8ce7;
        }

        .header .title {
            width: 960px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: auto;
            color: white;
        }

        .header .title .right-items {
            display: flex;
            align-items: center;
        }

        .web-font {
            font-size: 1.8em;
            margin: 10px 0;
        }

        .header .title .link {
            margin-right: 40px;
        }

        .header .title .link .link-item {
            margin-left: 10px;
            text-decoration: none;
            color: white;
        }

        .header .title .link .personal-introduce, .project-introduce {
            margin-right: 10px;
        }

        .header .title .link a:hover {
            color: #00EAFF;
            cursor: pointer;
        }

        .header .title img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 1px solid white;
        }

        .container .banner {
            width: 100%;
            background-color: #3c8ce7;
            /*background-image: linear-gradient(135deg, #3C8CE7 10%, #00EAFF 100%);*/
            color: white;
            /*background-color: rgba(179, 216, 255, 0.5);*/
            margin-top: 10px;
            padding: 10px;
            height: 160px;
        }

        .second .container .left-item {
            box-sizing: border-box;
            margin-top: 10px;
            margin-bottom: 10px;
            width: 240px;
            background-color: rgba(179, 216, 255, 0.5);
            text-align: center;
        }

        .second .container .title {
            text-align: center;
            background-color: #ccdef2;
            line-height: 36px;
            box-sizing: border-box;
        }

        .second .container .left-item .table {
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
        }

        .second .container .left-item .table-td-l {
            padding-left: 20px;
            text-align: right;
            line-height: 20px;
            margin-right: 10px;
        }

        .second .container .left-item .table-td-r {
            text-align: left;
            margin-right: 10px;
        }

        .second .container .left-item .rect {
            width: 100px;
            height: 0.8em;
            margin-top: 5px;
            margin-bottom: 7px;
            background-image: linear-gradient(135deg, #3C8CE7 30%, #00EAFF 100%);
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

        .second .container .left-item .rect .tran {
            margin-right: -5px;
            width: 20%;
            height: 120%;
            background-color: #d9ebff;
        }

        .container .right-item {
            box-sizing: border-box;
            margin-top: 10px;
            margin-bottom: 10px;
            width: 710px;
            background-color: rgba(179, 216, 255, 0.5);
            border-left: 1px solid black;
            border-top: 1px solid black;
            border-bottom: 1px solid black;
        }

        .container .right-item .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 1;
        }

        .container .right-item .tabs {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 1;
        }

        .container .right-item .tab {
            line-height: 36px;
            text-align: center;
            flex-grow: 1;
            border-right: 1px solid black;
            border-bottom: 1px solid black;
            background-color: #d0dae5;
            width: 200px;
            box-sizing: border-box;
        }

        .container .right-item .tab:hover {
            cursor: pointer;
            background-color: #ccdef2;
        }


        .container .right-item .active {
            border-bottom: 1px solid #ccdef2;
            background-color: #ccdef2;
        }

        .container .right-item .tab-content {
            display: flex;
            padding: 20px;
            padding-left: 30px;
        }

        .container .right-item .tab-content .info {
            padding-left: 30px;
            width: 500px;
        }

        .container .right-item .tab-content .info div {
            margin-bottom: 5px;
        }

        .container .right-item .tab-place {
            border-bottom: 1px solid black;
            background-color: #d0dae5;
            padding: 8px;
            height: 20px;
            flex-grow: 2;
        }


        .project-item {
            width: 100%;
            display: flex;
        }

        #project dd:nth-child(odd) {
            background-color: rgba(179, 216, 255, 0.3);
        }

        #project .container {
            width: 960px;
            align-items: center;
            justify-content: flex-start;
        }

        #project .container .info {
            margin-right: 5px;
            flex-grow: 1;
        }

        #project .container .title {
            font-weight: bold;
        }

        #project .container .info-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #project .container img {
            width: 100px;
            height: 100px;
            margin-right: 20px;
            margin-left: 5px;
            border: 1px solid #cccccc;
            margin-top: 40px;
        }

        #project .place {
            padding: 10px;
            margin: auto;
        }

        /*屏幕过小时不显示图片*/
        @media screen and (max-width: 1400px) {
            #project .place img {
                display: none;
            }
        }

        /*图片最大宽度为230px*/
        #project .place img {
            width: 70%;
            max-width: 230px;
            border: 1px solid #cccccc;
        }

        .hudong .container .left-item {
            margin-top: 10px;
            background-color: rgba(179, 216, 255, 0.3);
            width: 630px;
            height: 370px;
        }

        .hudong .container .left-item dl {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }


        .hudong .container .left-item .card {
            width: 150px;
            height: 180px;
            margin-bottom: 10px;
            background-color: #ccc;
            position: relative;
            overflow: hidden;
        }

        .hudong .container .left-item .card img {
            width: 100%;
            height: 100%;
        }

        .hudong .container .left-item .card .title {
            width: 100%;
            height: 25px;
            position: absolute;
            bottom: 0;
            background: rgba(0, 0, 0, 0.3);
            color: white;
        }

        .hudong .container .left-item .card .info {
            display: flex;
            align-items: center;
            justify-content: space-around;
            width: 100%;
            height: 25px;
        }

        .hudong .container .left-item .card .info-description {
            width: 100%;
            word-wrap: break-word;
            text-decoration: none;
            color: white;
        }

        .hudong .container .left-item .card .info-description:hover {
            color: #00EAFF;
        }


        .hudong .container .left-item .card:hover img {
            -webkit-transform: scale(1.1);
            transition: all .6s;
            cursor: pointer;
        }

        .hudong .container .left-item .card:hover .title {
            height: 80px;
            transition: all .6s;
            cursor: pointer;
        }

        /*.hudong .container .left-item .card .info .heart {*/
        /*    width: 20px;*/
        /*    height: 20px;*/
        /*    position: relative;*/
        /*}*/

        .hudong .container .left-item .card .info .heart {
            width: 50px;
            height: 50px;
            position: relative;
            display: block;
            background-image: url('./image/heart.png');
            background-repeat: no-repeat;
            background-size: 2900%;
        }

        .heart2 {
            animation: mymoveOK .8s linear;
            animation-fill-mode: forwards;
            animation-timing-function: steps(28);
        }

        @keyframes mymoveOK {
            from {
                background-position: left;
            }
            to {
                background-position: right;
            }
        }


        /*.hudong .container .left-item .card .info .heart .circle1 {*/
        /*    width: 58.8%;*/
        /*    height: 58.8%;*/
        /*    background: #e3e2e8;*/
        /*    !*background: red;*!*/
        /*    border-radius: 50%;*/
        /*    !*border-top: 1px solid red;*!*/
        /*    !*border-left: 1px solid red;*!*/
        /*    !*border: 1px solid red;*!*/
        /*    position: absolute;*/
        /*    left: 0;*/
        /*}*/

        /*.hudong .container .left-item .card .info .heart .circle2 {*/
        /*    width: 58.8%;*/
        /*    height: 58.8%;*/
        /*    background: #e3e2e8;*/
        /*    !*background: red;*!*/
        /*    border-radius: 50%;*/
        /*    !*border-top: 1px solid red;*!*/
        /*    !*border-right: 1px solid red;*!*/
        /*    position: absolute;*/
        /*    right: 0;*/
        /*}*/

        /*.hudong .container .left-item .card .info .heart .rect {*/
        /*    width: 57%;*/
        /*    height: 57%;*/
        /*    bottom: 16%;*/
        /*    background: #e3e2e8;*/
        /*    !*background: red;*!*/
        /*    position: absolute;*/
        /*    !*border-right: 1px solid red;*!*/
        /*    !*border-bottom: 1px solid red;*!*/
        /*    left: 21%;*/
        /*    transform: rotate(45deg);*/
        /*}*/

        /*.hudong .container .left-item .card .info:hover .circle1 {*/
        /*    background: red;*/
        /*    cursor: pointer;*/
        /*}*/

        /*.hudong .container .left-item .card .info:hover .circle2 {*/
        /*    background: red;*/
        /*    cursor: pointer;*/
        /*}*/

        /*.hudong .container .left-item .card .info:hover .rect {*/
        /*    background: red;*/
        /*    cursor: pointer;*/
        /*}*/

        .hudong .container .right-item {
            margin-top: 10px;
            background-color: rgba(179, 216, 255, 0.3);
            width: 320px;
            height: 370px;
            text-align: center;
        }

        .hudong .container .right-item .title {
            background-color: #ccdef2;
            text-align: center;
            padding: 8px;
            height: 20px;
            border-bottom: 1px solid black;
        }

        .hudong .container .right-item .comments dl {
            /*border-radius: 5px;*/
            height: 250px;
            overflow: auto;
            border-bottom: 1px solid black;
        }

        .hudong .container .right-item .comments dd {
            padding-left: 5px;
            padding-right: 5px;
            background: rgba(170, 189, 198, 0.5);
        }

        .hudong .container .right-item .comments dd:nth-child(even) {
            background: white;
            flex-direction: row-reverse;
        }

        .hudong .container .right-item .comment {
            display: flex;
            align-items: center;
            text-align: left;
        }


        .hudong .container .right-item .comments .avatar {
            background: #2c3e50;
            border-radius: 50%;
            text-align: center;
            color: white;
            width: 40px;
            line-height: 40px;
            margin: 5px;
            margin-right: 10px;
            flex-shrink: 0;
        }

        .hudong .container .right-item .comment-input {
            display: flex;
            flex-wrap: wrap;
        }

        .hudong .container .right-item .comment-input input {
            flex-grow: 1;
            margin: 5px;
        }

        .footer {
            width: 100%;
            /*background-color: #545c64;*/
            /*background-color: #a1d8ff;*/
            background-image: linear-gradient(135deg, #717376 10%, #4d565f 100%);
            color: white;
            height: 150px;
            text-align: center;
            padding-top: 30px;
        }

        #back-top span {
            cursor: pointer;
            display: block;
            height: 250px;
            margin: -125px 0 0;
            overflow: hidden;
            padding: 0;
            position: fixed;
            right: 0;
            top: 80%;
            width: 149px;
            z-index: 11;
            background: url('./image/back-top.png') no-repeat;
        }
    </style>
</head>
<body>
<div class="box">
    <nav class="header">
        <div class="container title">
            <i class="web-font">Hikari</i>
            <div class="right-items">
                <div class="link">
                    <a href="javascript:;" onclick="scoll('self-introduce')"
                       class="link-item personal-introduce">个人介绍</a> |
                    <a href="javascript:;" onclick="scoll('project')" class="link-item project-introduce">项目介绍</a> |
                    <a href="javascript:;" onclick="scoll('comments')" class="link-item message">给我留言</a>
                </div>
                <img src="./image/avatar.png" alt="">
            </div>
        </div>
    </nav>
    <div class="first">
        <div class="container">
            <div class="banner">
                <p class="m-text-large m-margin-tb-tiny">求职意向:前端开发工程师</p>
                2022届应届毕业生，正在寻找工作机会，工作地点不限，首选上海
                <br>
                <br>
                <br>
                <p class=" m-text-small m-margin-tb-tiny"><i class="iconfont icon-youxiang"></i> 2569757226@qq.com</p>
                <p class="m-text-small m-margin-tb-tiny"><i class="iconfont icon-shouji"></i>  13835486950</p>
            </div>
        </div>
    </div>
    <div id="self-introduce" class="second">
        <div class="container">
            <div class="left-item">
                <div class="title">技能掌握</div>
                <div class="table">
                    <div class="table-td-l">
                        <div class="m-text-small">HTML</div>
                        <div class="m-text-small">CSS</div>
                        <div class="m-text-small">JavaScript</div>
                        <div class="m-text-small">Vue</div>
                        <div class="m-text-small">Java</div>
                        <div class="m-text-small">C++</div>
                    </div>
                    <div class="table-td-r">
                        <div class="rect">
                            <div class="tran"></div>
                        </div>
                        <div class="rect">
                            <div class="tran"></div>
                        </div>
                        <div class="rect">
                            <div class="tran"></div>
                        </div>
                        <div class="rect">
                            <div class="tran"></div>
                        </div>
                        <div class="rect">
                            <div class="tran"></div>
                        </div>
                        <div class="rect">
                            <div class="tran"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right-item">
                <div class="header">
                    <dl id="tabSelector" class="tabs">
                        <dd class="tab active">教育经历</dd>
                        <dd class="tab">竞赛获奖</dd>
                        <dd class="tab">工作经历</dd>
                    </dl>
                    <div class="tab-place"></div>
                </div>
                <div id="tab-con" class="tab-content">
                    2018-至今
                    <div class="info edu-info">
                        <div> XXXXXX大学 本科 XXXX学院 计算机科学与技术</div>
                        <div> GPA: 3.87/4 英语水平: 6级</div>
                        <div> 在校期间学习成绩良好，专业排名前5%，曾获得国家奖学金，国家励志奖学金，多次专业一等奖学金，三好学生等荣誉。
                        </div>
                    </div>
                    <div class="info award-info" style="display: none">
                        2018.10全国大学生数学竞赛省级二等奖 <br>
                        2019.03第十届蓝桥杯C/C++组省赛一等奖 <br>
                        2019.09全国大学生数学建模竞赛省级二等奖 <br>
                        2020.10第11届蓝桥杯C/C++组省级一等奖，国家级三等奖 <br>
                        2021.04全国高校团体程序设计天梯赛团队铜奖，个人国家三等奖 <br>
                        2021.05第12届蓝桥杯Java组省级一等奖，国家级三等奖
                    </div>
                    <div class="info work-info" style="display: none">
                        暂无工作经历，求捞
                    </div>
                </div>
            </div>
        </div>
    </div>
    <dl id="project">
        <dd class="project-item">
            <div class="place">
                <img src="./image/vueShop.png" alt="" style="visibility: hidden">
            </div>
            <div class="container">
                <img src="./image/vueShop.png" alt="">
                <div class="info">
                    <div class="info-header">
                        <p class="m-text-meddle title m-margin-tb-tiny">Vue电商管理系统</p>
                        <p class="m-text-small date">2021-04 ~ 2021-05</p>
                    </div>
                    <p>前端工程师 | 自学项目</p>
                    <p>实现了商城后台管理用户账号(登录，退出，用户管理，权限管理)，商品管理(商品分类，分类参数，商品信息，订单)，数据统计等功能</p>
                    <p>项目中使用的技术：Vue | Vue-router | Element-UI | Axios | Echarts</p>
                </div>
            </div>
            <div class="place">
                <div class="demo">
                    <img src="./image/vueShop.png" alt="">
                </div>
            </div>
        </dd>
        <dd class="project-item">
            <div class="place">
                <img src="./image/blog2.jpeg" alt="" style="visibility: hidden">
            </div>
            <div class="container">
                <img src="./image/blog2.jpeg" alt="">
                <div class="info">
                    <div class="info-header">
                        <p class="m-text-meddle title m-margin-tb-tiny">SpringBoot开发的个人博客项目</p>
                        <p class="m-text-small date">2021-04 ~ 2021-05</p>
                    </div>
                    <p>独立开发 | 自学项目</p>
                    <p>一个简单的个人博客项目博客的浏览，查找，评论，以及后台对博客
                        的管理等功能。</p>
                    <p>SpringBoot+JPA | Semantic-UI | MySQL</p>
                </div>
            </div>
            <div class="place">
                <div class="demo">
                    <img src="./image/blog2.jpeg" alt="">
                </div>
            </div>
        </dd>
        <dd class="project-item">
            <div class="place">
                <img src="./image/ml.jpeg" alt="" style="visibility: hidden">
            </div>
            <div class="container">
                <img src="./image/ml.jpeg" alt="">
                <div class="info">
                    <div class="info-header">
                        <p class="m-text-meddle title m-margin-tb-tiny">基于深度学习的卡通图片自动生成</p>
                        <p class="m-text-small date">2020.09 ~ 2021.04</p>
                    </div>
                    <p>负责人 | 省级大创项目</p>
                    <p>
                        使用AnimeGAN，UGATIT，white-box，styleGAN等深度学习技术完成了真实照片卡通化和二次元头像自动生成等功能，并成功完成多种深度学习模型的训练和以及Python后端部署，前端以微信小程序的形式进行展示等。</p>
                    <p>项目中使用的技术：Python | 小程序 | GAN | PaddlePaddle</p>
                </div>
            </div>
            <div class="place">
                <div class="demo">
                    <img src="./image/ml.jpeg" alt="">
                </div>
            </div>
        </dd>
    </dl>
    <div class="hudong">
        <div class="container">
            <div class="left-item">
                <dl id="imgList">
                    <dd>
                        <div class="card">
                            <img src="./image/card.jpeg" alt="">
                            <div class="title">
                                <div class="info">
                                    <p class="m-text-small">CSDN个人博客</p>
                                    <div class="heart" >
                                    </div>
                                </div>
                                <a href="https://blog.csdn.net/weixin_44996854" class="info-description m-text-small">https://blog.csdn.net/weixin_44996854</a>
                            </div>
                        </div>
                    </dd>
                    <dd>
                        <div class="card">
                            <img src="./image/card.jpeg" alt="">
                            <div class="title">
                                <div class="info">
                                    <p class="m-text-small">我的码云仓库</p>
                                    <div class="heart">
                                    </div>
                                </div>
                                <a href="https://gitee.com/tyoubin_admin" class="info-description m-text-small">https://gitee.com/tyoubin_admin</a>
                            </div>
                        </div>
                    </dd>
                    <dd>
                        <div class="card">
                            <img src="./image/card.jpeg" alt="">
                            <div class="title">
                                <div class="info">
                                    <p class="m-text-small">我的个人网站</p>
                                    <div class="heart">
                                    </div>
                                </div>
                                <a href="http://hikari.top/" class="info-description m-text-small">http://hikari.top/
                                    <br>升级中，敬请期待</a>
                            </div>
                        </div>
                    </dd>
                    <dd>
                        <div class="card">
                            <img src="./image/card.jpeg" alt="">
                            <div class="title">
                                <div class="info">
                                    <p class="m-text-small">我的爱好</p>
                                    <div class="heart">
                                    </div>
                                </div>
                                <a href="#" class="info-description m-text-small">网球 跑步 二次元 日语</a>
                            </div>
                        </div>
                    </dd>
                    <dd>
                        <div class="card">
                            <img src="./image/card.jpeg" alt="">
                            <div class="title">
                                <div class="info">
                                    <p class="m-text-small">我的追番</p>
                                    <div class="heart">
                                    </div>
                                </div>
                                <a href="#" class="info-description m-text-small">one piece  进击の巨人 不滅のあなたへ</a>
                            </div>
                        </div>
                    </dd>
                    <dd>
                        <div class="card">
                            <img src="./image/card.jpeg" alt="">
                            <div class="title">
                                <div class="info">
                                    <p class="m-text-small">我的歌单</p>
                                    <div class="heart">
                                    </div>
                                </div>
                                <a href="#" class="info-description m-text-small">Lemon 打上花火 夜に駆ける Time after time</a>
                            </div>
                        </div>
                    </dd>
                    <dd>
                        <div class="card">
                            <img src="./image/card.jpeg" alt="">
                            <div class="title">
                                <div class="info">
                                    <p class="m-text-small">我的计划</p>
                                    <div class="heart">
                                    </div>
                                </div>
                                <a href="#" class="info-description m-text-small">学习前端，做项目，找工作</a>
                            </div>
                        </div>
                    </dd>
                    <dd>
                        <div class="card">
                            <img src="./image/card.jpeg" alt="">
                            <div class="title">
                                <div class="info">
                                    <p class="m-text-small">我的愿望</p>
                                    <div class="heart" >
                                    </div>
                                </div>
                                <a href="#" class="info-description m-text-small">找到工作 做的挑战的事 新的环境和朋友 去世界各地</a>
                            </div>
                        </div>
                    </dd>
                </dl>
            </div>
            <div id="comments" class="right-item">
                <div class="title">留言板</div>
                <div class="comments">
                    <dl>
                        <dd class="comment">
                            <div class="avatar m-text-large">梦</div>
                            <div class="content">
                                <p class="name m-text-small">蜡笔小新</p>
                                <p class="word m-text-small m-text-thin">梦不会逃走，逃走的一直都是自己。</p>
                            </div>
                        </dd>
                        <dd class="comment ">
                            <div class="avatar m-text-large">梦</div>
                            <div class="content">
                                <p class="name m-text-small">樱桃小丸子</p>
                                <p class="word m-text-small m-text-thin">心满意足享受每一点快乐，是走向幸福的唯一途径。</p>
                            </div>
                        </dd>
                        <dd class="comment">
                            <div class="avatar m-text-large">梦</div>
                            <div class="content">
                                <p class="name m-text-small">哈尔的移动城堡</p>
                                <p class="word m-text-small m-text-thin">世界这么大，人生这么长，总会有这么一个人，让你想要温柔的对待。</p>
                            </div>
                        </dd>
                        <dd class="comment">
                            <div class="avatar m-text-large">梦</div>
                            <div class="content">
                                <p class="name m-text-small">妖精的尾巴</p>
                                <p class="word m-text-small m-text-thin">若不想输给任何人，就得先认清自己的渺小。</p>
                            </div>
                        </dd>
                    </dl>
                </div>
                <form class="comment-input">
                    <input name="comment" type="text" placeholder="请输入评论" style="width: 100%">
                    <input name="name" type="text" placeholder="请输入姓名">
                    <input type="button" onclick="publish()" value="提交">
                </form>
            </div>
        </div>
    </div>
    <p id="back-top">
        <span></span>
    </p>
    <div class="footer">
        <p class="m-text-small m-text-spaced m-padded-tiny">
            走到生命的哪一个阶段,都该喜欢那一段时光,完成那一阶段该完成的职责,顺生而行,<br>
            不沉迷过去,不狂热地期待着未来, 生命这样就好。不管正经历着怎样的挣扎与挑战,或许我们都只有一个选择虽然痛苦,却依然要快乐,并相信未来</p>
        <p>Copright©2018-2022 Hikari Designed by Hikari</p>
    </div>
</div>
</body>

<script>

window.onload = function () {
    // 评论头像显示姓名第一个字
    const comment = document.getElementsByClassName('comment');
    for (let i = 0; i < comment.length; i++) {
        comment.item(i).getElementsByClassName('avatar')[0].textContent = comment.item(i).getElementsByClassName('name')[0].textContent.substring(0, 1)
    }
    // 对技能掌握程度进行随机赋值
    const skills = document.getElementsByClassName('tran')
    for (let i = 0; i < skills.length; i++) {
        skills.item(i).setAttribute('style', 'width:' + Math.ceil(Math.random() * 80) + 'px')
    }
    // 为tab标签添加点击事件
    const sel = document.getElementById('tabSelector')
    const tabs = sel.getElementsByTagName('dd')
    const tabCon = document.getElementById('tab-con')
    const cons = tabCon.getElementsByClassName('info')
    for (let i = 0; i < tabs.length; i++) {
        tabs.item(i).onclick = function () {
            tabs.item(i).classList.add('active')
            for (let j = 0; j < tabs.length; j++) {
                if (j !== i) {
                    tabs.item(j).classList.remove('active')
                    cons.item(j).setAttribute('style', 'display: none')
                } else {
                    cons.item(j).setAttribute('style', 'display: inline')
                }
            }
        }
    }
    // 将文件夹中的图片显示到互动区
    const imgList = document.getElementById('imgList').getElementsByTagName('img')
    for (let i = 0; i < imgList.length; i++) {
        imgList.item(i).setAttribute('src', './image/bg/' + i + '.jpeg')
    }

    const heartList = document.getElementById('imgList').getElementsByClassName('heart')
    for (let i = 0; i < heartList.length; i++) {
        // 添加点击爱心事件
        const heart = heartList.item(i)
        console.log(heart)
        heart.onclick = function () {
            if (heart.classList.length > 1) {
                heart.classList.remove('heart2')
            } else {
                heart.classList.add('heart2')
            }
        }
    }

    // 滑动到顶部
    const backTop = document.getElementById('back-top')
    backTop.onclick = function () {
        window.scrollTo({top: 0, behavior: 'smooth'})
    }
    backTop.style.opacity = 0
    window.onscroll = function () {
        if (document.documentElement.scrollTop < 100) {
            startMove('back-top', 0)
        } else {
            startMove('back-top', 100)
        }
    }
}
let timer = null;
let alpha = 0;
let speed = 0;

// 实现元素透明度渐变效果
function startMove(id, opTarget) {
    clearInterval(timer)
    const opDiv = document.getElementById(id);
    timer = setInterval(function () {
        if (alpha < opTarget) {
            speed = 20;
        } else if (alpha > opTarget) {
            speed = -20;
        }
        if (alpha === opTarget) {
            clearInterval(timer);
        } else {
            alpha += speed;
            opDiv.style.opacity = alpha / 100;
        }
    }, 100);
}

// 发表评论
function publish() {
    const name = document.getElementsByName('name')[0].value
    const comment = document.getElementsByName('comment')[0].value
    let content = `<dd class="comment">
                            <div class="avatar m-text-large">${name.substring(0, 1)}</div>
                            <div class="content">
                                <p class="name m-text-small">${name}</p>
                                <p class="word m-text-small m-text-thin">${comment}</p>
                            </div>
                        </dd>`
    console.log(content)
    const ct = document.getElementsByClassName('comments')[0].getElementsByTagName('dl')[0];
    content += ct.innerHTML
    ct.innerHTML = content
}

// 实现平滑滚动
function scoll(id) {
    window.scrollTo({top: document.getElementById(id).offsetTop, behavior: 'smooth'})
}


</script>
</html>